<template>
  <div>
    <van-tabbar
      :border="true"
      @change="is"
      v-model="active"
      active-color="#ff9201"
      inactive-color="#000"
    >
      <van-tabbar-item name="Home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="Class" icon="search">分类</van-tabbar-item>
      <van-tabbar-item name="ShopCart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="Myinf" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
    <component :is="$store.state.is"></component>
  </div>
</template>

<script>
import './assets/base.scss'
export default {
  data() {
    return {
      active: this.$store.state.is,
    }
  },
  components: {
    Home: require('./Home.vue').default,
    Class: require('./Class.vue').default,
    ShopCart: require('./ShopCart.vue').default,
    Myinf: require('./Myinf.vue').default,
  },
  methods: {
    is(active) {
      this.$store.commit('SET_IS', active)
    },
  },
}
</script>

<style></style>
